<template>
    <view class="choose-salesman-container">
        <search-box
            placeholderText="请输入业务员"
            :searchValue="saleSearchVal"
            @changeSearchVal="handleInputChange"
            @searchFn="searchFn" />
        <view class="list-wrapper">
            <mescroll-uni
                ref="mescrollRef"
                @init="mescrollInit"
                :fixed="false"
                :up="upOption"
                @down="downRefresh"
                @up="getNewData">
                <view class="user-wrapper">
                    <view
                        class="user-item flex-s-c"
                        v-for="item in salesmanList"
                        :key="item.UserCode"
                        @click="handleItemClick(item)">
                        <view class="name">{{ item.FullName }}</view>
                        <view class="selected-icon flex-center" v-show="item.isSelected">
                            <view class="point"></view>
                        </view>
                        <view class="unselected-icon" v-show="!item.isSelected"> </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex"
import {
    CHANGE_SALES_STATUS,
    CHANGE_SALE_SEARCH_VAL,
    CHANGE_SALES_LIST,
    CHANGE_SALE_SELECTED,
} from "@/store/mutation-type.js"

export default {
    data() {
        return {
            pageNumber: 1,
            pageSize: 20,
        }
    },
    created() {
        this.changeSearchVal("")
    },
    mounted() {
        uni.$on("resetSalesmanList", this.downRefresh)
    },
    unmounted() {
        uni.$off("resetSalesmanList", this.downRefresh)
    },
    computed: {
        ...mapState("report", ["salesmanList", "saleSearchVal"]),
    },
    methods: {
        ...mapMutations("report", [
            CHANGE_SALE_SELECTED,
            CHANGE_SALE_SEARCH_VAL,
            CHANGE_SALES_LIST,
            CHANGE_SALES_STATUS,
        ]),
        ...mapActions("report", ["fetchSalesmanList"]),
        handleInputChange(val) {
            this.changeSearchVal(val)
        },
        changeSearchVal(val) {
            this[CHANGE_SALE_SEARCH_VAL](val)
        },
        resetSalesmanList() {
            this[CHANGE_SALES_LIST]([])
        },
        getSalesmanList() {
            this.fetchSalesmanList({
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                fullName: this.saleSearchVal,
            }).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endByPage(res.Data.length, res.TotalAmout)
                } else {
                    this.mescroll.endErr()
                }
            })
        },
        searchFn(val) {
            this.changeSearchVal(val)
            this.resetSalesmanList()
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
        handleItemClick(item) {
            this[CHANGE_SALES_STATUS](item)
            this[CHANGE_SALE_SELECTED](item)
        },
        // 上拉加载
        getNewData(page) {
            console.log("getSalesmanList")
            this.pageNumber = page.num
            this.getSalesmanList()
        },
        // 下拉刷新
        downRefresh() {
            this.changeSearchVal("")
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.choose-salesman-container {
    height: 100%;
    padding-top: 88rpx;
    padding-bottom: 72rpx;
    box-sizing: border-box;
    overflow: hidden;

    .list-wrapper {
        height: calc(100% - 120rpx);
    }

    .user-wrapper {
        padding: 20rpx 36rpx 0 42rpx;

        .user-item {
            padding: 18rpx 0;
            border-bottom: 1rpx solid $border;

            .name {
                font-size: 28rpx;
            }

            .unselected-icon,
            .selected-icon {
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
            }

            .unselected-icon {
                border: 2rpx solid $uni-border-color;
            }

            .selected-icon {
                border: 1rpx solid $app-color-main;

                .point {
                    width: 16rpx;
                    height: 16rpx;
                    border-radius: 50%;
                    background-color: $app-color-main;
                }
            }
        }
    }
}
</style>
